<template>
    <div class="member-layout">
        <div class="search-part">
            <el-row :gutter="20" class="search-part-row">
                <el-col :span="14">
                    <div class="grid-content">
                        <v-simpsearch class="simple-search" @transferParam="getParam"></v-simpsearch>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--<data-table :data="information.data" :change="onTableChange" :on-select-change="onSelectChange"  striped   bordered>-->
        <!--<table-toolbar has-refresh has-columns-control>-->

        <!--<template slot="left">-->
        <!--<div class="level-item">-->
        <!--<p class="control has-addons">-->
        <!--<input class="input" type="text" placeholder="输入查询关键字">-->
        <!--<button class="button">搜索</button>-->
        <!--</p>-->
        <!--</div>-->
        <!--</template>-->
        <!--</table-toolbar>-->
        <!--<column label="机构">-->
        <!--<template scope="row">-->
        <!--<span>{{ row.organName }}</span>-->
        <!--</template>-->
        <!--</column>-->
        <!--<column label="操作人" field="operatorName" ></column>-->
        <!--<column label="时间" field="atTime" sorter="custom"></column>-->
        <!--<column label="事件" field="event"></column>-->
        <!--</data-table>-->
        <div class="memeber-manage-con">
            <el-table
                    :data="information.data"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"

                    @toggleRowSelection="toggleRowSelection"
                    @selection-change="handleSelectionChange">

                <el-table-column
                        label="机构"
                        align="left">
                    <template scope="scope">{{ scope.row.organName }}</template>
                </el-table-column>
                <el-table-column
                        prop="operatorName"
                        label="操作人"
                        align="left"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="atTime"
                        label="时间"
                        show-overflow-tooltip
                        align="left"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop="event"
                        label="事件"
                        show-overflow-tooltip
                        align="left"
                >
                </el-table-column>
            </el-table>
        </div>
        <modal title="查看" :width="520" :is-show="isShow" transition="fadeDown" @close="isShow=false">
            <h4>选中了：</h4>
            <p>
            <ul>
                <li v-for="item in selectedItems">
                    {{ item.name }}({{ item.work_no }} | {{ item.email }})

                </li>
            </ul>
            </p>
        </modal>
        <pagination :total="information.pagination.total" align="right" :change="onTableChange"
                    :pageSizeChange="handlePageSizeChange" :page-size="pageSize" :size-options="[20, 30, 50]"
                    v-if="true"></pagination>


    </div>
</template>

<script>
    import axios from '../../../util/http';
    import Datasource from 'vue-datasource';
    import cfg from '../../../properties';
    import vSimpsearch from '../SimpSearch.vue';
    export default {
        data: function () {
            const self = this;
            return {
                param: '',
                selectedItems: [],
                isShow: '',
                loadingEnable: false,
                total: '20',
                pageSize: 20,
                information: {
                    pagination: {},
                    data: []
                },
                columns: [
                    {
                        name: 'Id',
                        key: 'id',
                    },
                    {
                        name: '机构名称',
                        key: 'organName',
                    }
                    ,
                    {
                        name: '操作人',
                        key: 'operatorName',
                    },
                    {
                        name: '时间',
                        key: 'atTime',
                    },
                    {
                        name: '事件',
                        key: 'event',
                    }
                ],
                actions: [
                    {
                        text: 'Click',
                        class: 'btn-primary',
                        event(e, row) {
                            self.$message('选中的行数： ' + row.row.id);
                        }
                    }
                ],
                query: ''
            }
        },
        components: {
            Datasource, vSimpsearch
        },
        watch: {
            toggleRowSelection: function () {
                alert(3)
            }
        },
        methods: {
            toggleRowSelection: function () {
                alert(3)
            },
            changePage(values) {
                this.information.pagination.per_page = values.perpage;
                this.information.data = this.information.data;
            },
            onSearch(searchQuery) {
                this.query = searchQuery;
            },
            onSelectChange: function () {
                alert(3)
            },
            hasSelect: function () {

            },
            handleEdit: function () {

            },

            onTableChange: function (current) {
                console.log(current)
                let param = {
                    page: current,
                    rows: this.pageSize,
                    param:this.param
                }
                this.loadingEnable = true;
                this.$axioxs.get("/log/?" + this.$qs.stringify(param)).then(res => {
                    let data = res.data;
                    let pageinfo = {};
                    pageinfo.total = data.count;
                    pageinfo.pageSize = data.rows;
                    console.log(pageinfo.pageSize)
                    pageinfo.current = data.page;
                    pageinfo.last_page = data.totalPage;
                    this.information.pagination = pageinfo;
                    this.information.data = data.records;
                    this.pageSize = data.rows;
                    this.loadingEnable = false;
                }).catch(function (err) {
                    console.log(err);
                    this.loadingEnable = false;
                })
            },
            handlePageSizeChange(current, pageSize) {
                console.log('pageSize', pageSize);
                this.pageSize = Number(pageSize);
                this.onTableChange(current);

            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            getParam(res){
                this.param = res;
                this.$$("#content").scrollTop(0)
                this.onTableChange();
            }
        },
        computed: {
            getData(){
                const self = this;
                return self.information.data.filter(function (d) {
                    if (d.event.indexOf(self.query) > -1) {
                        return d;
                    }
                })
            }
        },
        beforeMount(){
            this.onTableChange(1);
        }
    }
</script>
